<template>
  <div class="task-layout">
    <!-- 顶部导航 -->
    <div class="task-header">
      <div class="header-content">
        <div class="header-left">
          <el-button text @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回首页
          </el-button>
          <div class="breadcrumb">
            <span>学习任务</span>
            <el-icon><ArrowRight /></el-icon>
            <span>{{ currentTitle || '任务中心' }}</span>
          </div>
        </div>
        
        <div class="header-right">
          <el-button @click="toggleProgress">
            <el-icon><TrendCharts /></el-icon>
            学习进度
          </el-button>
          <el-button @click="toggleSettings">
            <el-icon><Setting /></el-icon>
            任务设置
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="task-main">
      <router-view />
    </div>

    <!-- 学习进度抽屉 -->
    <el-drawer
      v-model="showProgress"
      title="学习进度"
      direction="rtl"
      size="400px"
    >
      <div class="progress-content">
        <div class="progress-stats">
          <div class="stat-item">
            <div class="stat-number">{{ taskStats.completedTasks }}</div>
            <div class="stat-label">已完成任务</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ taskStats.totalTasks }}</div>
            <div class="stat-label">总任务数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ taskStats.completionRate }}%</div>
            <div class="stat-label">完成率</div>
          </div>
        </div>
        
        <div class="progress-chart">
          <div class="chart-title">学习进度趋势</div>
          <div class="chart-placeholder">
            <el-icon><TrendCharts /></el-icon>
            <span>进度图表</span>
          </div>
        </div>
        
        <div class="recent-activities">
          <div class="activities-title">最近活动</div>
          <div class="activities-list">
            <div 
              v-for="activity in recentActivities" 
              :key="activity.id"
              class="activity-item"
            >
              <div class="activity-icon">
                <el-icon v-if="activity.type === 'completed'"><CircleCheck /></el-icon>
                <el-icon v-else-if="activity.type === 'started'"><Play /></el-icon>
                <el-icon v-else><Clock /></el-icon>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ formatTime(activity.time) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 任务设置抽屉 -->
    <el-drawer
      v-model="showSettings"
      title="任务设置"
      direction="rtl"
      size="350px"
    >
      <div class="settings-content">
        <div class="setting-group">
          <label>学习提醒</label>
          <el-switch v-model="taskSettings.reminder" @change="handleReminderChange" />
          <div class="setting-desc">开启后会在设定时间提醒您学习</div>
        </div>
        
        <div class="setting-group" v-if="taskSettings.reminder">
          <label>提醒时间</label>
          <el-time-picker
            v-model="taskSettings.reminderTime"
            format="HH:mm"
            placeholder="选择提醒时间"
            @change="handleReminderTimeChange"
          />
          <div class="setting-desc">每天在此时间提醒您学习</div>
        </div>
        
        <div class="setting-group">
          <label>每日学习目标</label>
          <el-slider 
            v-model="taskSettings.dailyGoal" 
            :min="1" 
            :max="10" 
            :step="1"
            show-stops
            @change="handleDailyGoalChange"
          />
          <div class="setting-desc">每天完成 {{ taskSettings.dailyGoal }} 个任务</div>
        </div>
        
        <div class="setting-group">
          <label>难度偏好</label>
          <el-select v-model="taskSettings.difficulty" @change="handleDifficultyChange">
            <el-option label="简单" value="easy" />
            <el-option label="中等" value="medium" />
            <el-option label="困难" value="hard" />
            <el-option label="混合" value="mixed" />
          </el-select>
          <div class="setting-desc">系统会优先推荐此难度的任务</div>
        </div>
        
        <div class="setting-group">
          <label>自动播放视频</label>
          <el-switch v-model="taskSettings.autoPlay" @change="handleAutoPlayChange" />
          <div class="setting-desc">进入视频任务时自动播放</div>
        </div>
        
        <div class="setting-group">
          <label>学习统计</label>
          <el-switch v-model="taskSettings.statistics" @change="handleStatisticsChange" />
          <div class="setting-desc">记录详细的学习数据和统计</div>
        </div>
        
        <div class="setting-actions">
          <el-button @click="resetSettings">重置设置</el-button>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  ArrowLeft, ArrowRight, TrendCharts, Setting, CircleCheck, Play, Clock
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 响应式数据
const showProgress = ref(false)
const showSettings = ref(false)

// 计算当前页面标题
const currentTitle = computed(() => {
  return route.meta?.title || ''
})

// 任务统计数据
const taskStats = ref({
  completedTasks: 28,
  totalTasks: 45,
  completionRate: 62
})

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    type: 'completed',
    title: '完成了"JavaScript基础语法"任务',
    time: new Date('2024-01-15 14:30:00')
  },
  {
    id: 2,
    type: 'started',
    title: '开始了"Vue.js组件开发"任务',
    time: new Date('2024-01-15 10:15:00')
  },
  {
    id: 3,
    type: 'reminder',
    title: '学习提醒：今日还有2个任务未完成',
    time: new Date('2024-01-15 09:00:00')
  },
  {
    id: 4,
    type: 'completed',
    title: '完成了"HTML结构设计"任务',
    time: new Date('2024-01-14 16:45:00')
  }
])

// 任务设置
const taskSettings = ref({
  reminder: true,
  reminderTime: new Date('2024-01-01 09:00:00'),
  dailyGoal: 3,
  difficulty: 'medium',
  autoPlay: false,
  statistics: true
})

// 方法
const goBack = () => {
  router.push('/')
}

const toggleProgress = () => {
  showProgress.value = !showProgress.value
}

const toggleSettings = () => {
  showSettings.value = !showSettings.value
}

const formatTime = (time) => {
  const now = new Date()
  const diff = now - time
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(hours / 24)
  
  if (days > 0) {
    return `${days}天前`
  } else if (hours > 0) {
    return `${hours}小时前`
  } else {
    const minutes = Math.floor(diff / (1000 * 60))
    return `${minutes}分钟前`
  }
}

const handleReminderChange = (enabled) => {
  ElMessage.success(`学习提醒已${enabled ? '开启' : '关闭'}`)
}

const handleReminderTimeChange = (time) => {
  ElMessage.success('提醒时间已更新')
}

const handleDailyGoalChange = (goal) => {
  ElMessage.success(`每日学习目标已设置为${goal}个任务`)
}

const handleDifficultyChange = (difficulty) => {
  const difficultyText = {
    'easy': '简单',
    'medium': '中等',
    'hard': '困难',
    'mixed': '混合'
  }
  ElMessage.success(`难度偏好已设置为${difficultyText[difficulty]}`)
}

const handleAutoPlayChange = (enabled) => {
  ElMessage.success(`视频自动播放已${enabled ? '开启' : '关闭'}`)
}

const handleStatisticsChange = (enabled) => {
  ElMessage.success(`学习统计已${enabled ? '开启' : '关闭'}`)
}

const resetSettings = () => {
  taskSettings.value = {
    reminder: true,
    reminderTime: new Date('2024-01-01 09:00:00'),
    dailyGoal: 3,
    difficulty: 'medium',
    autoPlay: false,
    statistics: true
  }
  ElMessage.success('设置已重置')
}

const saveSettings = () => {
  // 保存设置到本地存储
  localStorage.setItem('task-settings', JSON.stringify(taskSettings.value))
  ElMessage.success('设置已保存')
}

// 生命周期
onMounted(() => {
  // 从本地存储加载设置
  const savedSettings = localStorage.getItem('task-settings')
  if (savedSettings) {
    try {
      taskSettings.value = { ...taskSettings.value, ...JSON.parse(savedSettings) }
    } catch (error) {
      console.warn('Failed to load task settings:', error)
    }
  }
})
</script>

<style lang="scss" scoped>
.task-layout {
  min-height: 100vh;
  background: var(--el-bg-color-page);
  display: flex;
  flex-direction: column;
}

.task-header {
  background: white;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--el-text-color-secondary);
    font-size: 14px;
  }
}

.header-right {
  display: flex;
  gap: 12px;
}

.task-main {
  flex: 1;
  overflow: hidden;
}

.progress-content {
  .progress-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    
    .stat-item {
      text-align: center;
      padding: 16px;
      background: var(--el-fill-color-extra-light);
      border-radius: 8px;
      
      .stat-number {
        font-size: 24px;
        font-weight: 700;
        color: var(--el-color-primary);
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
  
  .progress-chart {
    margin-bottom: 24px;
    
    .chart-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 12px;
      color: var(--el-text-color-primary);
    }
    
    .chart-placeholder {
      height: 200px;
      background: var(--el-fill-color-extra-light);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--el-text-color-placeholder);
      
      .el-icon {
        font-size: 32px;
      }
    }
  }
  
  .recent-activities {
    .activities-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 12px;
      color: var(--el-text-color-primary);
    }
    
    .activities-list {
      .activity-item {
        display: flex;
        gap: 12px;
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 8px;
        transition: background-color 0.3s ease;
        
        &:hover {
          background: var(--el-fill-color-extra-light);
        }
        
        .activity-icon {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--el-color-primary-light-9);
          color: var(--el-color-primary);
          flex-shrink: 0;
        }
        
        .activity-content {
          flex: 1;
          
          .activity-title {
            font-size: 14px;
            margin-bottom: 2px;
            color: var(--el-text-color-primary);
          }
          
          .activity-time {
            font-size: 12px;
            color: var(--el-text-color-placeholder);
          }
        }
      }
    }
  }
}

.settings-content {
  .setting-group {
    margin-bottom: 24px;
    
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
    
    .setting-desc {
      margin-top: 4px;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
    
    .el-select,
    .el-time-picker {
      width: 100%;
    }
  }
  
  .setting-actions {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--el-border-color-extra-light);
    
    .el-button {
      flex: 1;
    }
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 12px;
  }
  
  .header-left,
  .header-right {
    width: 100%;
    justify-content: center;
  }
  
  .progress-stats {
    grid-template-columns: 1fr !important;
  }
}
</style>
